<template>
	<view>
		<view class="order-box" v-for="(item,index) in orderList" :key="index">
			<view class="order-item">				
				<view class="c-name">
					<text>单号：{{item.worksheetNumber}}</text>
					<view  class="c-state1"
						:style=" { backgroundColor: getColorByState(item.worksheetStateStr)}">
						{{item.worksheetStateStr}}
					</view>
				</view>
				<view class="c-list">
					<view class="row">
						<text>执行人： {{item.assignUserName}}</text>
						<text>下单 : {{item.createTime}}</text>
					</view>
				</view>
				<view class="c-detail" ref="imgHeight">
					<view class="detail-left">
						<image :src="item.imgUrl" class="img"></image>
					</view>
					<view class="detail-right">
						<text class="name">{{item.errorCode}}</text>
						<view class="description">{{item.faultDescription}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import * as API from '@/common/api';
	export default {
		name:"scan-printer-serveRecord",
		data() {
			return {
				status: 'loadmore',
				params: {
					worksheetState:undefined,
				    pageNum: 1,
				    pageSize: 10,
				},
				orderList: [],
			};
		},
		methods: {
			getColorByState(stateStr)
			{
				if(stateStr=='新工单')
				{
					return '#66FF66';
				}
				else if(stateStr=='已接单')
				{
					return '#66B2FF';
				}
				else if(stateStr=='已预约')
				{
					return '#FFFF66';
				}
				else if(stateStr=='检修中')
				{
					return '#FFCC66';
				}
				else if(stateStr=='报修中')
				{
					return '#CC99FF';
				}
				else if(stateStr=='维修中')
				{
					return '#FF6666';
				}
				else
				{
					return '#CCCCCC';
				}
				
			},
			getInitOrderList(deviceNumber) {
			    this.params.pageNum = 1;
				this.params.deviceNumber=deviceNumber;
			    this.status = 'loadmore';
			    this.orderList=[];
			    this.getOrderList();
			},
			async getOrderList() {
			    if(this.status!='nomore')
			    {
					
			        this.status = 'loading';
			        const res = await API.listWorksheet({
			            params: this.params
			        });
					res.rows.forEach(row=>{
						if(row.imageVideoUrl)
						{
							row.imgUrl=row.imageVideoUrl.split(",")[0];
						}
						
					})
			        this.orderList = this.orderList.concat(res.rows);
			        this.params.pageNum += 1;
			        if (res.total <= this.params.pageNum * this.params.pageSize) {
			            this.status = 'nomore';
			        } else {
			            this.status = 'loadmore';
			            
			        }
				
			    }
				
			},
		}
	}
</script>

<style lang="less">
	
	.order-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		gap: 20rpx;
		padding-bottom: 30rpx;
	
		.order-item {
			height: 180px;
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			margin-top: 1px;
			background-color: #ffffff;
			border-top: 1px solid rgba(255, 255, 255, 1);
			border-left: 1px solid rgba(255, 255, 255, 1);
			box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
			border-radius: 8px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			gap: 10rpx;
	
			.c-name {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				font-size: 28rpx;
				font-weight: bold;
				display: flex;
	
				background: #ffffff;
	
				.c-state1 {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					color: #ffffff;
					font-weight: bold;
					box-sizing: border-box;
					width: 90rpx;
					font-size: 22rpx;
					height: 36rpx;
					border-radius: 5rpx;
				}
			}
	
			.c-list {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				gap: 15rpx;
				font-size: 22rpx;
				color: #989898;
				width: 100%;
				padding: 5rpx;
				box-sizing: border-box;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	
				.row {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
				}
	
	
			}
	
			.c-detail {
	
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				width: 100%;
				box-sizing: border-box;
				margin-top: 10rpx;
				gap: 20rpx;
				height: 126rpx;
	
				.detail-left {
	
					align-items: center;
	
					.img {
						height: 126rpx;
						width: 180rpx;
						border-radius: 5px;
					}
				}
	
				.detail-right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
	
					gap: 10rpx;
					height: 100%;
	
					.title {
						width: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
	
					}
	
					.description {
						font-size: 26rpx;
						color: #989898;
						margin-left: 2%;
					}
				}
			}
	
			.c-btn {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				gap: 10rpx;
	
				.btn {
					width: 120rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10px;
					font-size: 12px;
					font-weight: bold;
					margin: 0;
					padding: 0;
	
	
				}
	
				.btn:nth-of-type(1) {
					color: #4091D7;
					background: rgba(64, 145, 215, 0.06);
					border: 1px solid #4091D7;
				}
	
				.btn:nth-of-type(2) {
					color: #2E49E8;
					background: rgba(43, 70, 233, 0.08);
					border: 1px solid #2E49E8;
				}
	
				.btn:nth-of-type(3) {
					color: #ffffff;
					background: #93C145;
					box-shadow: 0px 8px 15px 0px rgba(147, 193, 69, 0.34);
				}
				.btn:nth-of-type(4) {
					color: #ffffff;
					background: #409EFF;
					box-shadow: 0px 8px 15px 0px rgba(64,158,255, 0.34);
				}
	
				.btn::after {
					border: none;
				}
			}
		}
	}
</style>